<template>
  <laker-dialog
    v-model="visible"
    title="风险分析"
    width="900"
    height="900"
    :show-fullscreen="true"
    :show-close="true"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <table class="laker-table">
      <tr>
        <th>两票类型</th>
        <th>工作任务</th>
        <th>状态</th>
        <th>许可开工时间</th>
        <th>地点</th>
        <th>责任部门</th>
        <th>责任班组</th>
        <th>签到记录</th>
        <th>应签到人</th>
        <th>作业风险</th>
        <th>班组K值</th>
        <th>风险等级</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item, index) in ttkList" :key="index">
        <td>{{ item.ttkType }}</td>
        <td>{{ item.ttkDsc }}</td>
        <td>{{ item.ttkSta }}</td>
        <td>{{ item.ttkBegDate }}</td>
        <td>{{ item.ttkLoc }}</td>
        <td>{{ item.cstNam }}</td>
        <td>{{ item.cstGroup }}</td>
        <td><el-button type="primary">签到记录</el-button></td>
        <td><el-button type="primary">签到记录</el-button></td>
        <td>{{ item.zyfx }}</td>
        <td>{{ item.fxkz }}</td>
        <td :class="item.fxdj">{{ item.fxdjName }}</td>
        <td><el-button type="primary" @click="openDetail(item)">详情</el-button></td>
      </tr>
    </table>
  </laker-dialog>

  <RiskAnalysisDialog ref="raDialogRef" v-if="dialog.raDialog" @closed="dialog.raDialog = false"></RiskAnalysisDialog>
</template>

<script>
import LakerDialog from '@/components/lakerDialog/index.vue'
import RiskAnalysisDialog from './RiskAnalysis.vue'
import { dayjs } from 'element-plus'

export default {
  name: 'RiskTop10',
  components: { LakerDialog, RiskAnalysisDialog },
  emits: ['success', 'closed'],
  data() {
    return {
      dialog: {
        raDialog: false
      },
      mode: 'add',
      visible: false,
      titleMap: {
        add: '选择设备类型',
        edit: '编辑人员',
        show: '查看'
      },
      elmain: 'elmain',
      today: dayjs().format('YYYY-MM-DD'),
      risk01: 0,
      ttkList: [
        {
          ttkType: '热机工作票',
          ttkDsc: '热机工作票',
          ttkSta: '进行中',
          ttkBegDate: '2024-07-01',
          ttkLoc: '13米平台',
          cstNam: '生技部',
          cstGroup: '热工班组',
          zyfx: '密闭空间',
          fxkz: '50',
          fxdj: 'H',
          fxdjName: '较大风险'
        },
        {
          ttkType: '热机工作票',
          ttkDsc: '热机工作票',
          ttkSta: '进行中',
          ttkBegDate: '2024-07-01',
          ttkLoc: '13米平台',
          cstNam: '生技部',
          cstGroup: '热工班组',
          zyfx: '密闭空间',
          fxkz: '50',
          fxdj: 'H',
          fxdjName: '较大风险'
        },
        {
          ttkType: '热机工作票',
          ttkDsc: '热机工作票',
          ttkSta: '进行中',
          ttkBegDate: '2024-07-01',
          ttkLoc: '13米平台',
          cstNam: '生技部',
          cstGroup: '热工班组',
          zyfx: '密闭空间',
          fxkz: '50',
          fxdj: 'H',
          fxdjName: '较大风险'
        },
        {
          ttkType: '热机工作票',
          ttkDsc: '热机工作票',
          ttkSta: '进行中',
          ttkBegDate: '2024-07-01',
          ttkLoc: '13米平台',
          cstNam: '生技部',
          cstGroup: '热工班组',
          zyfx: '密闭空间',
          fxkz: '50',
          fxdj: 'H',
          fxdjName: '较大风险'
        }
      ]
    }
  },
  methods: {
    //显示
    open(mode = 'add') {
      this.mode = mode
      this.visible = true
      console.log(this.visible)
      return this
    },
    close() {
      this.visible = false
      return this
    },
    //表单注入数据
    setData(data) {
      console.log(data)
    },
    openDetail(item) {
      this.dialog.raDialog = true
      this.$nextTick(() => {
        this.$refs.raDialogRef.open('show').setData(item)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.laker-table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #dcdfe6 !important;
  margin-bottom: 20px;
}
.laker-table th {
  border-collapse: collapse;
  border-right: 1px solid #dcdfe6 !important;
  border-bottom: 1px solid #dcdfe6 !important;
  background-color: #f0f2f5 !important;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: normal;
  text-align: center;
  font-weight: bold;
  height: 35px;
  color: #909399;
}
.laker-table td {
  border-collapse: collapse;
  border-right: 1px solid #dcdfe6 !important;
  border-bottom: 1px solid #dcdfe6 !important;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: normal;
  text-align: center;
  word-break: break-all;
}
.laker-table tr:nth-child(odd) {
  background-color: #fff !important;
}
.laker-table tr:nth-child(even) {
  background-color: #f8f8f8 !important;
}
.VH {
  background-color: #ff0000;
  color: black;
}

.H {
  background-color: #ff7d00;
  color: black;
}

.N {
  background-color: #ffff00;
  color: black;
}

.L {
  background-color: skyblue;
  color: white;
}
</style>
